<!-- 发票列表 -->
<template>
  <view>
		<navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar>
    <toptitle :title="invoiceStatus" :textArr="invoiceMsgs"/>
    <view class="view_box">
      <view>
        <view class="line">
          <text :class="invoiceItems.invoiceType == 1 ? 'color_c6' : ''">发票抬头</text>
          <text class="fontNumber" :class="invoiceItems.invoiceType == 1 ? 'color_c6' : ''">{{ invoiceItems.invoiceTitle }}</text>
        </view>
        <view class="line">
          <text :class="invoiceItems.invoiceType == 1 ? 'color_c6' : ''">发票税号</text>
          <text class="fontNumber" :class="invoiceItems.invoiceType == 1 ? 'color_c6' : ''">{{ invoiceItems.payeeRegisterNo }}</text>
        </view>
        <view class="line">
          <text :class="invoiceItems.invoiceType == 1 ? 'color_c6' : ''">发票金额</text>
          <text class="fontNumber" :class="invoiceItems.invoiceType == 1 ? 'color_c6' : ''"> <text class="mark">¥</text>{{invoiceItems.invoiceAmount }}</text>
        </view>
        <view class="line">
          <text :class="invoiceItems.invoiceType == 1 ? 'color_c6' : ''">开票时间</text>
          <text class="fontNumber" :class="invoiceItems.invoiceType == 1 ? 'color_c6' : ''">{{ invoiceItems.createTime }}</text>
        </view>
        <view class="line">
          <text :class="invoiceItems.invoiceType == 1 ? 'color_c6' : ''">邮箱地址</text>
          <text class="fontNumber" :class="invoiceItems.invoiceType == 1 ? 'color_c6' : ''">{{ invoiceItems.email }}</text>
        </view>
      </view>
      <view class="download_invoice" v-if="invoiceItems.invoiceType == 0 && invoiceItems.taskStatus == 5" @click="downloadInvoice">下载发票</view>
      <view class="button_tohome" :style="{marginTop: (invoiceItems.invoiceType == 0 && invoiceItems.taskStatus == 5) ? '32rpx': '76rpx'}" @click="handleToHomePage">前往首页</view>
    </view>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
  </view>
</template>

<script>
import tip from '@/utils/tip';
import api from '@/api/api';
import customize from '@/utils/customize';
import Loading from '@/components/common/loading';
import customHeader from '@/components/common/custom';
import NavBar from '@/components/common/navbar';
import { SYSTEM_INFO, CUSTOMER_INFO, MERCHANT_INFO, USER_SPECICAL_INFO } from '@/utils/constant';
import toptitle from './components/toptitle';

export default {
  components: {
		navBar:NavBar,
    customHeader: customHeader,
    toptitle: toptitle
  },
  data() {
    return {
      isShowCustomNavBar: true,
      // 组件所需的参数
      navbarData: {
        showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
        navbarTitle: '发票信息', //导航栏 中间的标题
        hideSearch:true,
        hideHome:true
      },
      orderId: '',
      invoiceItems: {},
      nowPages:'',
      taskStatus: {
        0: '未提交',
        1: '提交失败',
        2: '提交成功',
        3: '提交成功',   //  处理中
        4: '开票失败',
        5: "开具成功"   //  开票成功
      },
      invoiceStatus: "",
      invoiceMsgs: []
    };
  },
  onLoad(option) {
    let that = this;
    that.orderId = option.orderNo || "";
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1];
    this.nowPages = currPage.route;
  },
  onShow() {
    let that = this;
    that.getInvoiceItems();
    getApp().cl_tracker.track('mini_program_view', { path:  this.nowPages, pageName: '查看发票' })
  },
  methods: {
		/**
		 * 展示弱提示
		 * @param {Object} msg 文案
		 */
		handleShowTextToast(msg){
			try{
				this.$refs.toastPopup.showToast(msg);
			}catch(e){}
		},
		/**
		 * 若提示按钮点击回调
		 * @param {Object} data.type 类型：confirm确定，cancel取消
		 * @param {Object} data.callBackData 呼气弹窗时传入的数据
		 */
		onToastPopupClick(data){},
    getInvoiceItems: async function() {
      let that = this;
      let customerInfo = uni.getStorageSync(CUSTOMER_INFO)
      that.invoiceItems = {};
      let invoiceList = await api.getInvoiceList({
        header: {
          jwt: customerInfo.jwt
        },
        query: {
          order_id: this.orderId
        }
      });
      if (invoiceList.code == 1000 && invoiceList.data.content.length > 0) {
        that.invoiceItems = invoiceList.data.content[0];
        if(that.invoiceItems.invoiceType == 1){
          that.invoiceStatus = "发票已红冲";
          that.invoiceMsgs = ['尊贵的麦卡伦贵宾，您已完成退货退款','您申请的发票已红冲','如您有任何疑问，请联系在线客服，感谢您对麦卡伦的理解'];
        }else{
          let _status = that.invoiceItems.taskStatus;
          let s_createTime = that.invoiceItems.createTime;
          that.invoiceItems.createTime = s_createTime.substr(0, 10);
          that.invoiceStatus = that.taskStatus[_status];
          that.invoiceMsgs = _status == 5 ? ['尊贵的麦卡伦贵宾，已成功为您开具该发票','请前往您登记的邮箱查看']: [2,3].includes(_status) ? ['尊贵的麦卡伦贵宾，您的发票申请已提交','确认收货后我们会尽快为您开具'] : [];
        }
      } else {
        that.handleShowTextToast(invoiceList.msg);
      }
    },
    // 跳转首页
    handleToHomePage(){
      uni.reLaunch({
        url: '/pages/home/home'
      });
    },
    //  保存发票
    downloadInvoice() {
      let that = this;
      tip.loading('下载中');
      wx.downloadFile({
        url: that.invoiceItems.filePath,
        filePath: `${wx.env.USER_DATA_PATH}/invoice_${new Date().getTime()}.pdf`, //自定义文件地址
        success(res) {
          if (res.statusCode === 200) {
						wx.openDocument({
							filePath: res.filePath,
							showMenu: true,
							fileType: "pdf",
							success(res){
								console.log('打开文档成功')
							},
						})
          }
        },
        complete(res) {
          tip.loaded();
        }
      });
    }
  }
};
</script>

<style>
  .view_box{
    margin: 0 48rpx;
    padding-bottom: 50rpx;
    font-family: FrankNew-Regular,NotoSansSC-Regular;
  }
.pageTitle {
  text-align: center;
  border-bottom: 1px solid #7f7f7f;
  margin: 0 40rpx;
  padding: 40rpx 0 80rpx 0;
  color: #000;
  font-size: 34rpx;
}
.invoiceName {
  margin-bottom: 10rpx;
  color: #000;
}
.invoiceBox {
  margin: 0 40rpx;
  padding: 40rpx 0;
  border-bottom: 1px solid #7f7f7f;
  font-size: 28rpx;
}
.invoiceBox .tip {
  color: #862633;
  font-size: 24rpx;
}
.invoiceInfo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}
.invoiceInfo label:nth-child(2),
.invoiceInfo label:nth-child(3) {
  color: #000;
}
.button_tohome {
  width: 100%;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 48rpx 16rpx 48rpx 48rpx;
  box-sizing: content-box;
  background-color: #000;
  color: #fff;
  margin-top: 76rpx;
  font-size: 28rpx;
  font-weight: 500;
}
.download_invoice{
  font-size: 28rpx;
  font-weight: normal;
  padding-bottom: 4px;
  width: 112rpx;
  border-bottom: 1px solid #000;
  margin: 96rpx auto 0;
}
.line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 144rpx;
  line-height: 144rpx;
  border-bottom: 1px solid #F2F2F2;
  font-size: 28rpx;
  color: #000;
}
.line .fontNumber {
  font-size: 24rpx;
  color: #757575;
}
.color_c6{
  color: #c6c6c6 !important;
}
.mark{
  font-family: NotoSansSC-Regular;
}
</style>
